import React from 'react'
import PropTypes from 'prop-types'
import { View, Text, StyleSheet, Image } from 'react-native'
import { ScaleS, ScaleT, IS_IPHONEX } from 'src/utils/ScreenUtil'
import CustomImage from 'src/components/image/CustomImage'
import CustomButton from 'src/components/button/CustomButton'
import { getUserAvatorLocalB, unloginDefaultPortrait } from 'src/utils/ConfigUtil'
import TitleInfoItem from '../../../../components/title-info-item/index'
import DefaultImage from '../../../../components/image/DefaultImage'
import ShareBtn from 'src/components/button/ShareBtn'
import { ONE_PIXEL } from '@/utils/ScreenUtil'

export default class UserInfo extends React.PureComponent {
  static propTypes = {
    style: PropTypes.object,
    userinfo: PropTypes.object,
    userNumberData: PropTypes.object,
    avatorClick: PropTypes.func,
    userNameClick: PropTypes.func,
    setBtnClick: PropTypes.func,
    goPersonCollection: PropTypes.func,
    goCommunicationHistory: PropTypes.func,
    onShared: PropTypes.func
  }

  static defaultProps = {
    userinfo: {},
    userNumberData: {}
  }

  render() {
    const {
      style,
      userinfo: { userId, B: userinfoB },
      userNumberData: { archiveCollection = 0, talentTalk = 0 },
      avatorClick,
      userNameClick,
      setBtnClick,
      goPersonCollection,
      goCommunicationHistory,
      onShared
    } = this.props
    const { userAvator, userName, postion, gender } = userinfoB
    return (
      <View style={[style, styles.container]}>
        <View style={styles.shareBar}>
          <ShareBtn onPress={onShared} />
        </View>
        <View style={styles.titleView}>
          <CustomButton
            style={styles.titleLeft}
            onPress={userNameClick}
          >
            <Text style={styles.titleCenterName}>{userName || '您的姓名'}</Text>
            <Text style={styles.postion}>{postion || '请输入您的职务'}</Text>
          </CustomButton>
          <CustomButton style={styles.titlePortraitBtn} onPress={avatorClick}>
            {
              userinfoB.userId ? (
                <DefaultImage
                  style={styles.titlePortraitImg}
                  source={{ uri: userAvator }}
                  errorSource={getUserAvatorLocalB(gender, userinfoB.userId)}
                />
              ) : (
                  <CustomImage style={styles.titlePortraitImg} source={unloginDefaultPortrait} />
                )
            }
          </CustomButton>
          {/* <CustomButton style={styles.setBtn} onPress={setBtnClick}>
            <CustomImage
              style={styles.setImg}
              source={require('@/imgC/company/btn_set.png')}
            />
          </CustomButton> */}
        </View>
        {/* <View style={styles.titleInfo}>
          <TitleInfoItem
            value={archiveCollection}
            label={'人才收藏'}
            onPress={goPersonCollection}
            imgSrc={require('src/imgC/userinfo/icon_collection.png')}
          />
          <TitleInfoItem
            value={talentTalk}
            onPress={goCommunicationHistory}
            label={'沟通历史'}
            imgSrc={require('src/imgC/userinfo/icon_comunity_history.png')}
          />
        </View> */}

        <View style={styles.infoContainer}>
          <View style={styles.infoContainerLeft}>
            <CustomButton style={styles.followInfo} onPress={goPersonCollection}>
              <Text style={styles.followInfoTop}>{archiveCollection}</Text>
              <Text style={styles.followInfoBottom}>关注</Text>
            </CustomButton>
            <CustomButton style={styles.followInfo}>
              <Text style={styles.followInfoTop}>{0}</Text>
              <Text style={styles.followInfoBottom}>被关注</Text>
            </CustomButton>
          </View>
          <View style={styles.infoContainerRight}>
            <CustomButton style={styles.followBtn} onPress={setBtnClick}>
              <CustomImage
                source={require('@/imgC/userinfo/set_black.png')}
              />
            </CustomButton>
            {/* <CustomButton style={styles.goChatBtn}>
              <Text style={styles.goChatBtnText}>更多</Text>
            </CustomButton> */}
          </View>
        </View>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    // flex: 1
  },
  shareBar: {
    flexDirection: 'row',
    justifyContent: 'flex-end',
    marginHorizontal: ScaleS(20)
  },
  titleView: {
    marginTop: ScaleS(20),
    flexDirection: 'row',
    marginHorizontal: ScaleS(20)
  },
  titlePortraitBtn: {},
  titlePortraitImg: {
    width: ScaleS(90),
    height: ScaleS(90),
    resizeMode: 'cover',
    borderRadius: ScaleS(45)
  },
  titleLeft: {
    flex: 1,
    flexDirection: 'column',
    paddingTop: ScaleS(15)
  },
  titleCenterView: {
    // alignItems: 'flex-start'
  },
  jobHuntingView: {
    flexDirection: 'row',
    marginTop: ScaleS(15)
  },
  jobHuntingImg: {
    marginRight: ScaleS(5)
  },
  postion: {
    fontSize: ScaleS(14),
    color: '#3C3C3C',
    marginTop: ScaleS(10)
  },
  titleCenterName: {
    color: '#3C3C3C',
    fontSize: ScaleT(22),
    fontWeight: '900'
  },
  titleRightImg: {
    width: 26,
    height: 26,
    marginTop: 3
  },
  titleInfo: {
    flexDirection: 'row',
    paddingHorizontal: ScaleS(20),
    marginTop: ScaleS(36),
    justifyContent: 'space-between'
  },
  infoContainer: {
    flex: 1,
    flexDirection: 'row',
    alignItems: 'flex-end',
    justifyContent: 'space-between',
    marginTop: ScaleS(50),
    marginHorizontal: ScaleS(20),
    paddingBottom: ScaleS(19),
    borderBottomColor: '#f1f1f1',
    borderBottomWidth: ONE_PIXEL,
    borderStyle: 'solid'
  },
  infoContainerLeft: {
    flexDirection: 'row',
    alignItems: 'center'
  },
  followInfo: {
    flexDirection: 'column',
    alignItems: 'center',
    marginRight: ScaleS(40)
  },
  followInfoTop: {
    fontSize: ScaleT(20),
    fontWeight: 'bold',
    color: '#3C3C3C'
  },
  followInfoBottom: {
    fontSize: ScaleT(11),
    color: '#9E9E9E',
    marginTop: ScaleS(5)
  },
  infoContainerRight: {
    flexDirection: 'row'
  },
  followBtn: {
    width: ScaleS(50),
    height: ScaleS(30),
    backgroundColor: 'rgba(74,74,74,1)',
    borderRadius: ScaleS(4),
    justifyContent: 'center',
    alignItems: 'center',
    marginRight: ScaleS(3)
  },
  followBtnText: {
    fontSize: ScaleT(18),
    fontWeight: 'bold',
    color: '#fff'
  },
  goChatBtn: {
    width: ScaleS(70),
    height: ScaleS(30),
    backgroundColor: 'rgba(255,228,0,1)',
    borderRadius: ScaleS(4),
    justifyContent: 'center',
    alignItems: 'center'
  },
  goChatBtnText: {
    fontSize: ScaleT(12),
    fontWeight: '500',
    color: '#000'
  }
})
